import React, { useState, useEffect } from 'react'
import { Table, Space, Button, Image, Switch } from 'antd'
import { getRecommendData, getCategoryList, updateFlag } from '../../api/pro'
const { Column } = Table
function Com() {
  const [proList, setProList] = useState([])

  useEffect(() => {
    async function getData () {
      const res = await getRecommendData()
      setProList(res.data.data)
    }
    getData()
  }, [])

  // 设置页码以及每页显示个数
  // https://ant.design/components/pagination-cn/#API
  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(10)


  // 分类筛选
  const [categoryList, setCategoryList] = useState([])
  useEffect(() => {
    getCategoryList().then(res => {
      console.log(res.data.data)
      const arr = []
      res.data.data.forEach(item => {
        arr.push({
          text: item,
          value: item
        })
      })
      setCategoryList(arr)
    })
  }, [])
  return (
    <Space style = {{ width: '100%'}} direction = "vertical">
      <Button type="primary">添加商品</Button>
      <Table
        dataSource = { proList }
        rowKey = "proid"
        scroll={{ x: 1600, y: 600 }}
        pagination = {{
          // position: ['bottomLeft', 'topRight']
          current,
          pageSize,
          onChange (page, pageSize) { // 修改页码以及每页显示个数
            setCurrent(page)
            setPageSize(pageSize)
          },
          showTotal (total) {
            return '共有' + total + '条数据'
          },
          showQuickJumper: true,
          pageSizeOptions: ['10', '50', '100']
        }}
      >
        <Column fixed="left" width="100" title="序号" render = { (text, record, index) => (<span>{ (current - 1) * pageSize + index + 1 }</span>)}/>
        <Column fixed="left" width="200" title="产品名称" dataIndex="proname"/>
        <Column fixed="left" width="200" title="产品图片" dataIndex="img1" render={ text => (<Image src={text} style={{ width: 60, height:60}} />) }/>
        <Column width="200" filters={ categoryList } title="产品分类" dataIndex="category" onFilter= {(value, record) => record.category.indexOf(value) !== -1}/>
        <Column width="200" title="产品品牌" dataIndex="brand"/>
        <Column width="200" sorter={(a,b) => a.originprice - b.originprice } title="产品价格" dataIndex="originprice"/>
        <Column width="200" sorter={(a,b) => a.discount - b.discount } title="产品折扣" dataIndex="discount"/>
        <Column width="200" sorter={(a,b) => a.stock - b.stock } title="产品库存" dataIndex="stock"/>
        
        <Column width="200" title="是否推荐" dataIndex="isrecommend" render = { (text, record) => {
          return <Switch defaultChecked = { text === 1 } onChange = { checked => {
            console.log(checked)
            updateFlag({
              proid: record.proid,
              type: 'isrecommend',
              flag: checked
            }).then(() => {
              getRecommendData().then(res => setProList(res.data.data))
            })
          }}/>
        }}/>
        
        <Column fixed="right" width="200" title="操作" render={(text, record) => (
          <Space direction="vertical">
            <Button>编辑</Button>
            <Button>删除</Button>
          </Space>
        )}/>
      </Table>
    </Space>
  )
}

export default Com


